<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="assets/lib/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/base.css">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
    <div class="n-btn">
        <!-- 轮播图区域 -->
        <div class="wrap">
            <div class="ban-img">
                <div class="layui-carousel" id="banner">
                    <div carousel-item id="g-focus">
                    </div>
                </div>
            </div>
            <div class="download-pr">
                <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="g-bd">
        <div class="g-mn1">
            <!-- 热门内容推荐模块 -->
            <div class="g-wrap">
                <!-- 热门推荐 -->
                <div class="n-md">
                    <!-- 推荐标题 -->
                    <div class="n-hot">
                        <a href="javascript:;" class="rmd-title">热门推荐</a>
                        <div class="tab">
                            <a href="javascript:;" class="s-fs" data-cat="古风">古风</a>
                            <a href="javascript:;" class="s-fs" data-cat="华语">华语</a>
                            <a href="javascript:;" class="s-fs" data-cat="民谣">民谣</a>
                            <a href="javascript:;" class="s-fs" data-cat="流行">流行</a>
                            <a href="javascript:;" class="s-fs" data-cat="摇滚">摇滚</a>
                        </div>
                        <span class="more"><a href="playList.html" target="fm">更多</a></span>
                    </div>
                    <!--热门推荐歌单 -->
                    <ul class="m-cvrlst">
                    </ul>

                    <!-- 新碟上架 -->
                    <div class="n-new">
                        <div class="n-hot">
                            <a href="javascript:;" class="rmd-title">新碟上架</a>
                            <span class="more"><a href="newDisc.html" target="fm">更多</a></span>
                        </div>
                        <div class="n-disk">
                            <div class="inner">
                                <a href="javascript:;" class="click-pre"></a>
                                <a href="javascript:;" class="click-next"></a>
                                <div class="roll">
                                    <ul class="roll-flag">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 榜单推荐 -->
                    <div class="n-bill">
                        <div class="n-hot">
                            <a href="javascript:;" class="rmd-title">榜单</a>
                            <span class="more"><a href="main.html" target="fm">更多</a></span>
                        </div>
                        <div class="n-bilst">
                            <dl class="blk">
                                <dt class="top">
                                    <div class="cver">
                                        <a href="javascript:;">
                                            <img src="assets/images/cver.png" alt="">
                                        </a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;">飙升榜</a>
                                        <div class="btn">
                                            <a href="javascript:;" class="s-bg1"></a>
                                            <a href="javascript:;" class="s-bg"></a>
                                        </div>
                                    </div>
                                </dt>
                                <dd>
                                    <ol>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="s-fc0">查看全部</a>
                                        </li>
                                    </ol>
                                </dd>
                            </dl>
                            <dl class="blk">
                                <dt class="top">
                                    <div class="cver">
                                        <a href="javascript:;">
                                            <img src="assets/images/cver.png" alt="">
                                        </a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;">飙升榜</a>
                                        <div class="btn">
                                            <a href="javascript:;" class="s-bg1"></a>
                                            <a href="javascript:;" class="s-bg"></a>
                                        </div>
                                    </div>
                                </dt>
                                <dd>
                                    <ol>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="s-fc0">查看全部</a>
                                        </li>
                                    </ol>
                                </dd>
                            </dl>
                            <dl class="blk">
                                <dt class="top">
                                    <div class="cver">
                                        <a href="javascript:;">
                                            <img src="assets/images/cver.png" alt="">
                                        </a>
                                    </div>
                                    <div class="tit">
                                        <a href="javascript:;">飙升榜</a>
                                        <div class="btn">
                                            <a href="javascript:;" class="s-bg1"></a>
                                            <a href="javascript:;" class="s-bg"></a>
                                        </div>
                                    </div>
                                </dt>
                                <dd>
                                    <ol>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <span class="no">1</span>
                                            <a href="javascript:;" class="nm">天上飞</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="s-fc0">查看全部</a>
                                        </li>
                                    </ol>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右侧推荐模块 -->
            <div class="g-sd">
                <div class="n-user">
                    <div class="n-myinfo">
                        <p class="note">
                            登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机
                        </p>
                        <a href="javascript:;" class="btn-login">用户登录</a>
                    </div>
                </div>
                <!-- 入驻歌手 -->
                <div class="n-singer">
                    <h3 class="v-hd1">
                        <span class="f-f1">入驻歌手</span>
                        <a href="javascript:;" class="s-fs3">查看全部</a>
                    </h3>
                    <ul class="singer-list">
                        <li>
                            <a href="javascript:;" class="itm">
                                <div class="itm-head">
                                    <img src="assets/images/fio.jpg" alt="">
                                </div>
                                <div class="itm-ifo">
                                    <h4>
                                        <span class="f-thid">王三博</span>
                                    </h4>
                                    <p class="f-thid">音乐人</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="itm">
                                <div class="itm-head">
                                    <img src="assets/images/fio.jpg" alt="">
                                </div>
                                <div class="itm-ifo">
                                    <h4>
                                        <span class="f-thid">王三博</span>
                                    </h4>
                                    <p class="f-thid">音乐人</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="itm">
                                <div class="itm-head">
                                    <img src="assets/images/fio.jpg" alt="">
                                </div>
                                <div class="itm-ifo">
                                    <h4>
                                        <span class="f-thid">王三博</span>
                                    </h4>
                                    <p class="f-thid">音乐人</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="itm">
                                <div class="itm-head">
                                    <img src="assets/images/fio.jpg" alt="">
                                </div>
                                <div class="itm-ifo">
                                    <h4>
                                        <span class="f-thid">王三博</span>
                                    </h4>
                                    <p class="f-thid">音乐人</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="itm">
                                <div class="itm-head">
                                    <img src="assets/images/fio.jpg" alt="">
                                </div>
                                <div class="itm-ifo">
                                    <h4>
                                        <span class="f-thid">王三博</span>
                                    </h4>
                                    <p class="f-thid">音乐人</p>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <div class="apply-for">
                        <a href="javascript:;" class="u-btn">申请成为网易人</a>
                    </div>
                </div>
                <!-- 热门主播 -->
                <div class="n-dj">
                    <h3 class="v-hd1">
                        <span class="f-f1">热门主播</span>
                    </h3>
                    <ul class="hotdj-list">
                        <li>
                            <a href="javascript:;" class="dj-cver">
                                <div class="itm-head">
                                    <img src="assets/images/fio.jpg" alt="">
                                </div>
                            </a>
                            <div class="info">
                                <p>
                                    <a href="javascript:;" class="f-fg4">王三博</span>
                                </p>
                                <p class="s-fg6">心里学家</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    </div>

    <!-- 加载轮播图数据 -->
    <script type="text/html" id="g-banner">
        {{each banners}}
            <div><img src="{{$value.pic}}"></div>
        {{/each}}
    </script>

    <script src="assets/lib/jquery.js"></script>
    <script src="assets/lib/layui/layui.all.js"></script>
    <script src="assets/lib/template-web.js"></script>
    <script src="assets/lib/axios.js"></script>
    <script src="assets/js/base.js"></script>
    <script src="assets/js/main.js"></script>
</body>
<!-- 渲染推荐歌单 -->
<script type="text/html" id="playlist-hot">
    <ul class="m-cvrlst">
        {{each playlists}}
        <li>
            <div class="u-cover">
                <img src="{{$value.coverImgUrl}}" alt="">
            </div>
            <p class="dec">
                <a href="javascript:;">{{$value.name}}</a>
                                </p>
                                <p class="dec">
                                    <a href="javascript:;" class="user-playlist">{{$value.creator.nickname}}</a>
                                </p>
                                <div class="u-bottom">
                                    <a href="javascript:;" class="icon-play"></a>
                                    <span class="icon-headset"></span>
                                    <span class="nb">{{$value.playCount | getInt}}万</span>
                                </div>
                        </li>
                        {{/each}}
                    </ul>
                    </script>

                    <!-- 渲染热门新碟 -->
                    <script type="text/html" id="hotDisc">
                        {{each albums}}
                        <li>
                            <div class="d-cover">
                                <img src="{{$value.picUrl}}" alt="">
                                <a href="javascript:;" class="msk"></a>
                            </div>
                            <p class="f-thide">
                                <a href="javascript:;">{{$value.name}}</a>
                            </p>
                            <p class="f-thide">
                                <a href="javascript:;" class="s-fs3">{{$value.artist.name}}</a>
                            </p>
                        </li>
                        {{/each}}
                    </script>

</html>